<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>群星网约车</title>
	<link rel="icon" href="../image/carMR.png" type="image/png">
	<!--这里引入页面的样式-->
	<style>
		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 20px;
			/* 			background-color:gainsboro; */
		}
		.logo-title {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
		}
		.logo {
			height: 50px;
		}

		.title {
			font-size: 24px;
			font-weight: bold;
		}

		.links {
			display: flex;
			align-items: center;
		}

		.links el-link {
			margin-left: 10px;
		}

		.user-info {
			display: flex;
			align-items: center;
		}

		.avatar {
			margin-right: 10px;
		}

		.username a {
			color: #333;
			text-decoration: none;
		}

		.content {
			padding: 20px;
			text-align: center; /* 添加文本居中对齐 */
		}

		.search-bar {
			display: flex;
			display: inline-block; /* 修改为内联块级元素 */
			justify-content: center; /* 水平居中对齐 */
			align-items: center; /* 垂直居中对齐 */
			margin-bottom: 20px; /* 可选：添加一些底部间距 */
		}

		.search-bar input[type="text"] {
			width: 300px;
			padding: 8px;
			font-size: 16px;
			border: 1px solid #ccc;
			border-radius: 5px;
			margin-right: 10px;
		}

		.map {
			height: 400px;
		}
		.el-carousel__item h3 {
			color: #475669;
			font-size: 14px;
			opacity: 0.75;
			line-height:200px;
			margin: 0;
		}

		.el-carousel__item:nth-child(2n) {
			background-color: #99a9bf;
		}

		.el-carousel__item:nth-child(2n+1) {
			background-color: #d3dce6;
		}
		.el-carousel__item {
			position: relative;
		}

		.image-container {
			height: 200px;
			overflow: hidden;
		}

		.image-container img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.history-routes-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			max-height: 200px; /* 设置容器的最大高度 */
			overflow-y: auto; /* 垂直方向上出现滚动条 */
		}

		.history-route-item {
			margin-bottom: 10px;
			cursor: pointer;
			padding: 10px;
			background-color: #f0f0f0;
			border-radius: 5px;
		}

		.history-route-item:hover {
			background-color: #e0e0e0;
		}
		@media (max-width: 768px) {
			.header {
				flex-direction: column;
				align-items: flex-start;
			}

			.links {
				width: 100%;
				justify-content: space-around;
				position: fixed;
				bottom: 0;
				background-color: white;
				padding: 10px 0;
				box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
				z-index: 1000;
				margin-bottom: 10px;
				margin-left: -25px;
			}

			.links el-link {
				margin-left: 0;
			}

			.user-info {
				margin-top: 10px;
				width: 100%;
				justify-content: space-between;
			}
			.logo-title {
				display: flex;
				align-items: center;
				width: 100%;
				justify-content: center;
			}

			.logo {
				height: 40px;
			}

			.title {
				font-size: 20px;
			}

			.search-bar {
				flex-direction: column;
				width: 100%;
				margin-bottom: 10px;
			}

			.search-bar input[type="text"] {
				width: 100%;
				margin-right: 0;
				margin-bottom: 10px;
			}

			.map {
				height: 300px;
				width: 100%;
				height: 200px;
			}

			.content {
				display: flex;
				flex-direction: column-reverse;
				width: 90%;
			}
		}
	</style>
</head>
<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<!-- 引入百度地图 API -->
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=rXA8iQy9OhoIKkZEjWbO0xJR5c40gDcg"></script>
<script src="https://api.map.baidu.com/api?v=1.0&amp;type=webgl&amp;ak=rXA8iQy9OhoIKkZEjWbO0xJR5c40gDcg"></script>

<body>
<div id="app">
	<div class="header">
		<div class="logo-title">
			<img class="logo" src="../image/carMR.png">
			<span class="title">群星网约车欢迎您</span>
		</div>
		<div class="links">
			<el-link href="userMain.html" target="_self" :underline="false">主页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="orderUserInfo.html" target="_self" :underline="false">我的订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="preferential.html" target="_blank" :underline="false">群星优惠&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="taxiInfo.html" target="_blank" :underline="false">群星简介&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="userInfo.html" target="_self" :underline="false">个人中心&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
		</div>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<div class="user-info">
			<div>
				<el-avatar :src="avatar"></el-avatar>
			</div>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<span class="username"><a id="uname" href="javascript:void(0)">{{ displayUsername }}</a></span>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<el-link target="_blank" :underline="false" @click="exitInfo">退出系统</el-link>
			&nbsp;&nbsp;&nbsp;&nbsp;
		</div>
	</div>
	<el-carousel :interval="4000" type="card" height="200px" style="margin-bottom: 20px;">
		<el-carousel-item v-for="(item, index) in images" :key="index">
			<div class="image-container">
				<img :src="item" alt="Image">
			</div>
		</el-carousel-item>
	</el-carousel>
	<div class="content">
		<div class="search-bar">
			<input type="text" id="searchInput1" v-model="startPoint" placeholder="请输入起点">
			<span> → &nbsp;</span>
			<input type="text" id="searchInput" v-model="endPoint" placeholder="请输入终点">
			<el-button type="primary" plain @click="travel">去打车？</el-button>
			<el-button type="primary" plain @click="showHistoryRoutes">常用路线</el-button>
		</div>
		<div id="searchResultPanel" class="search-result"></div>
		<el-main>
			<div id="allmap" class="map"></div>
		</el-main>
		<el-dialog
				title="历史路线"
				:visible.sync="historyDialogVisible"
				width="30%"
				center>
			<div class="history-routes-container">
				<div
						v-for="(route, index) in historyRoutes"
						:key="index"
						class="history-route-item"
						@click="selectHistoryRoute(route)">
					<span>{{ route.departureLocation }} → {{ route.destinationLocation }}</span>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
		        <el-button @click="historyDialogVisible = false">关 闭</el-button>
		      </span>
		</el-dialog>
	</div>
</div>

<!-- <el-container>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;">
    </div>
    <el-main> -->
<!-- 地图显示 -->
<!-- <div id="allmap" style="height: 400px;"></div>
</el-main>
</el-container> -->


<script>
	// request拦截器，将用户token放入头中
	axios.interceptors.request.use(
			config => {
				let token = localStorage.getItem("token"); // 确保 token 正确存储在 localStorage 中
				if (token) {
					config.headers['token'] = token;
				}
				return config;
			},
			error => {
				console.log(error);
				return Promise.reject(error);
			}
	);
	new Vue({
		el: '#app',
		data() {
			return {
				historyDialogVisible: false, // 控制历史路线弹框显示
				historyRoutes: [], // 示例的历史路线数据
				startPoint: '', // 起点输入框绑定的数据
				endPoint: '', // 终点输入框绑定的数据
				images: [
					'../image/b1.jpg',
					'../image/b2.jpg',
					'../image/b3.jpg',
					'../image/b4.jpg',
					'../image/b5.jpg',
					'../image/b6.jpg'
				],
				map: null,
				peopleX: "",
				peopleY: "",
				bassX: "",
				bassY: "",
				userId: "",
				userName: "",
				avatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
			};
		},
		methods: {
			showHistoryRoutes() {
				axios.get('/order/orders/getListSE?userId='+this.userId)
						.then(response=>{
							if (response.data.code === 1) {
								this.historyRoutes = response.data.data;
								this.$message.success('历史路线加载成功......');
							} else {
								this.errorMessage = response.data.msg;
								this.$message.error(this.errorMessage);
							}
						});
				this.historyDialogVisible = true; // 打开历史路线弹框
			},
			selectHistoryRoute(route) {
				this.startPoint = route.departureLocation;
				this.endPoint = route.destinationLocation;
				var geocoder = new BMap.Geocoder();
				geocoder.getPoint(this.startPoint, function(point) {
					if (point) {
						var lng = point.lng; // 经度
						var lat = point.lat; // 纬度
						console.log("地点：" + this.startPoint + " 的经度：" + lng + "，纬度：" + lat);
						this.peopleX = lng;
						this.peopleY = lat;
						localStorage.setItem('peopleX', this.peopleX);
						localStorage.setItem('peopleY', this.peopleY);
					} else {
						console.log("无法获取地点：" + this.startPoint + " 的经纬度坐标。");
					}
				}, "衡阳市");
				geocoder.getPoint(this.endPoint, function(point) {
					if (point) {
						var lng = point.lng; // 经度
						var lat = point.lat; // 纬度
						console.log("地点：" + this.endPoint + " 的经度：" + lng + "，纬度：" + lat);
						this.bassX = lng;
						this.bassY = lat;
						localStorage.setItem('bassX', this.bassX);
						localStorage.setItem('bassY', this.bassY);
					} else {
						console.log("无法获取地点：" + this.endPoint + " 的经纬度坐标。");
					}
				}, "衡阳市");
				this.historyDialogVisible = false; // 关闭历史路线弹框
			},
			initMap() {
				// 百度地图API功能
				var map = new BMap.Map("allmap");
				var point = new BMap.Point(116.331398, 39.897445);
				map.centerAndZoom(point, 12);
				// 启用滚轮缩放功能
				map.enableScrollWheelZoom(true);
				// 添加放大缩小控件
				map.addControl(new BMap.NavigationControl());
				// 添加搜索功能
				var local = new BMap.LocalSearch(map, {
					renderOptions: {
						map: map
					}
				});


				// 添加关键字提示输入
				var ac = new BMap.Autocomplete({
					"input": "searchInput",
					"location": map
				});
				ac.addEventListener("onconfirm", function(e) {
					var value = e.item.value;
					var address = value.province + value.city + value.district + value.street + value
							.business;

					local.search(address);
					var geocoder = new BMap.Geocoder();
					geocoder.getPoint(address, function(point) {
						if (point) {
							var lng = point.lng; // 经度
							var lat = point.lat; // 纬度
							console.log("地点：" + address + " 的经度：" + lng + "，纬度：" + lat);
							this.bassX = lng;
							this.bassY = lat;
							localStorage.setItem('bassX', this.bassX);
							localStorage.setItem('bassY', this.bassY);
						} else {
							console.log("无法获取地点：" + address + " 的经纬度坐标。");
						}
					}, "衡阳市");
				});

				// 添加关键字提示输入
				var ac = new BMap.Autocomplete({
					"input": "searchInput1",
					"location": map
				});
				ac.addEventListener("onconfirm", function(e) {
					var value = e.item.value;
					var address = value.province + value.city + value.district + value.street + value
							.business;

					local.search(address);
					var geocoder = new BMap.Geocoder();
					geocoder.getPoint(address, function(point) {
						if (point) {
							var lng = point.lng; // 经度
							var lat = point.lat; // 纬度
							console.log("地点：" + address + " 的经度：" + lng + "，纬度：" + lat);
							this.peopleX = lng;
							this.peopleY = lat;
							localStorage.setItem('peopleX', this.peopleX);
							localStorage.setItem('peopleY', this.peopleY);
						} else {
							console.log("无法获取地点：" + address + " 的经纬度坐标。");
						}
					}, "衡阳市");
				});
				var geolocation = new BMap.Geolocation();
				var self = this; // 保存对当前对象的引用

				geolocation.getCurrentPosition(function(r) {
					if (this.getStatus() == BMAP_STATUS_SUCCESS) {
						var mk = new BMap.Marker(r.point);
						map.addOverlay(mk);
						map.panTo(r.point);
						alert('您的位置：' + r.point.lng + ',' + r.point.lat);

						// 使用保存的 self 来访问对象的属性
						/* 								self.peopleX = r.point.lng;
                                                        self.peopleY = r.point.lat;
                                                        localStorage.setItem('peopleX', self.peopleX);
                                                        localStorage.setItem('peopleY', self.peopleY); */
					} else {
						alert('failed' + this.getStatus());
					}
				}, {
					enableHighAccuracy: true
				});
			},
			travel(){
				console.log("你点击了一下");
				var value1 = document.getElementById('searchInput1').value;
				var value = document.getElementById('searchInput').value;
				localStorage.setItem('searchInput1', value1);
				localStorage.setItem('searchInput', value);
				axios.get('/order/orders/getStatus5?userId='+this.userId)
						.then(response=>{
							if(response.data.code==1){
								console.log("可正常打车");
								window.location.href = "takeTaxi.html";
							}else{
								console.log("有订单未支付");
								this.$message.error('有订单未支付...');
								return;
							}
						});
			},
			orderInfo(){

			},
			userInfo(){

			},
			exitInfo(){
				localStorage.removeItem('userId');
				localStorage.removeItem('userName');
				window.location.href = "../html/login.html"; // 页面跳转
			}
		},
		mounted() {
			this.userId = localStorage.getItem('userId');
			this.userName = localStorage.getItem('userName');
			this.avatar = localStorage.getItem('pic');
/*			if (this.userName === null) {
				this.$message.error('非法进入,请先登录');
				setTimeout(() => {
					window.location.href = "../html/login.html";
				}, 3000); // 延迟2秒（2000毫秒）执行
			} else {
				this.initMap();
			}*/
			 this.initMap();
		},
		computed: {
			displayUsername() {
				// 如果 userName 不为空，显示 userName；否则显示 "未登录"
				return this.userName ? this.userName : "未登录";
			}
		},
	});
</script>
<!-- 不用vue的js代码写在下面-->
<script>
</script>
</body>
</html>
